Hello and welcome to this lecture.
In this let's show we will be quick to the functionality for our calculator using javascript How the
moment the calculator looks beautiful.
But none of the key pads work.
So we'll do that using javascript.
All right just one good true.
Some of the things we'll be using for this javascript session to implement the functionality for the
calculator.
So we'll be using the display property to display a property is used to set or return the policemen's
display type.
So we use the display property to display something and then next will be using the On Click event.
The On Click event usually is used to execute any javascript function when a button is clicked.
So a lot of the keypads fully kirkley tours are going a function of buttons.
So when they are clicked on Click event will be activated and then some theme an event will happen.
So the quake is used to respond to a click event.
Max will be using also the evaluation function the eveillard function is used to evaluate or execute
an argument so I use that to evaluate values as well.
So for example one plus to evaluate that it gives you three will also be making use of the assignment
operator which is the plus or equates to.
So the assignment operator busily you use that to add value to the variable.
Another way to express the assignment operator which is X which is a plus equals two.
You can also express this as this or x pylos Equals to Y is the same thing as X equals 2 x plots Y.
For example if you have a variable called X equals 210 then x bloss Equals to 5 will give you the result
of that variable so X so plus equals to operate is the same thing as x bloss was to Y or X equals 2
x plus why.
I hope it makes sense if he doesn't let me know.
I will try and explain in a bit more.
So this is our calculator at the moment.
If I click on any of the Keys or the buttons you can see nothing is displayed in my screen here.
Okay this is because we've not implemented any javascript so when I start doing that now so we aren't
going to implement the functionality inside.
How are hastier mail document.
So what Im going to do to each of the buttons.
I am going to attach an on Click event so the quake event because the send button when it is click will
display the value on that button.
I'm going to attach another quick event in combination to use in the display property on line.
A team of this hit him mail documents I have trashed this on Click event here and this.
The value here is the name of the form which has a name here on the form online 16.
So when the button is click use in the display property it would display the value which is zero here
who displayed is value zero on the card.
This card here is the form.
That's what it means.
It means when the button is kleek is a display display property to display the value which is this one
on the form and the value is in what is next to the value of the operator.
Plus or equal to zero sum will save this and then we're gonna to test it out.
If that works I'm just going to copy and do the same.
On the other Button's.
So I've saved it finally on zero and now he should display something on the screen.
Let me refresh.
You can see the zero is now being implemented.
And the other body's own work here because I've not done that so I'm going to copy and change the values
for the order.
KEITH So I have now implemented the javascript inside the hastier Muller document.
So I have attached the on Click event to all the input tags.
So the enke next to the click giving the on kleek value the same properties quickly as I've used the
display property to display the value on the form using He pylos or equal to operator.
And if you notice I've set the value of the plus two equals or preto to the value of the keys.
So this is keypad 0 1 2 and then we've got the keypad plots keypad 3 4 5 key pad equals two.
And then this is the key pad minus the same thing.
So basically I've done the same for all of the process is the same for all of it.
So when the bottom is click moves on Click event will trigger this action.
It will use the display property to display the value that has been pressed on to the form display screen
on line 32.
I have use the on Click event and give him value of the karch which kakis in them on the form dot the
display property dot the value equals.
So the evaluation function because this is normally when you add two values or take away two values
you use equal still sign you means you are you had in some being taken away in multiplying or dividing
this valuation function is what is used to evaluate or execute what's inside that argument.
So inside the argument we have inside the argument we have the form which is a karch DOT.
The display property got the value.
So these are the arguments that this equal sign we'll evaluate compute and then display a result on
the screen.
So that's basically the form done.
If I saved that or the buttons on the calculator should now work.
So let's go refresh and test.
So try a simple addition so we can trower the key.
So I do three plus two.
If you see it's clear that do for take away too as to claim that I do six times seven gives me 42 A
clear that I go for it to divide by 4.
Give you that.
Okay that's truth trampin Now let's try to get off the ride by to give you six.
All right so all that needs are cut callate are done.
Just want to highlight something online.
33 of the code when we use the On Click event for the division.
This is t symbol.
So the backslash.
Here is what javascript uses to perform a division.
Just to let you know.
And it uses the uses asterisks to the US so we could see on line 29 A uses the asterisks for multiplication
and the slash for pair from mean deviation.
So thank you so much for your time.
I hope you have you've had fun creating your own calculator.
Play around with the values and not apply your own touch to lick her -- to take care of the best hand.
Bye for now.